<template>
  <div class style="height:100%;">
    <el-table
      :data="data"
      height="100%"
      style="width: 100%;"
      row-key="id"
      stripe
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="functionName" label="菜单名称" width="180"></el-table-column>
      <el-table-column prop="functionUrl" label="功能路径"></el-table-column>
      <el-table-column prop="functionList" label="功能列表">
        <template slot-scope="scope">
          <el-tag
            title="请点击操作查看"
            size="mini"
            v-for="(item,index) in scope.row.functionList"
            :key="index"
          >{{item.functionName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleNodeClick(scope.row)" size="mini">操作</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="`操作管理-${chackedNode.functionName}`" :visible.sync="dialogShow">
      <div class="card btns">
        <el-button size="mini" type="primary" @click="addItem">增加</el-button>
      </div>
      <el-table :data="chackedNode.functionList" border stripe style="width: 100%">
        <el-table-column prop="functionName" label="功能名称"></el-table-column>
        <el-table-column prop="functionUrl" label="功能路径"></el-table-column>
        <el-table-column prop="functionOrderNum" label="功能序号"></el-table-column>
        <el-table-column prop="functionIntroduce" label="备注"></el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editItem(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteItem(scope.row)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="操作管理" :visible.sync="dialogFormVisible" width="300px">
      <el-form size="mini" ref="gn" :model="form" :rules="rules" label-width="100px">
        <my-form-item label="功能名称" prop="functionName">
          <el-input v-model="form.functionName" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="功能路径" prop="functionUrl">
          <el-input v-model="form.functionUrl" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="功能序号">
          <el-input v-model="form.functionOrderNum" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="备注">
          <el-input v-model="form.functionIntroduce" autocomplete="off"></el-input>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="ok" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getMenuList } from "@/functions/menuList";
import { addItem, deleteItem, editItem } from "./function";
export default {
  components: {},
  data() {
    return {
      dialogShow: false,
      isAdd: false,
      dialogFormVisible: false,
      form: {
        parentId: "",
        functionName: "",
        functionUrl: "",
        functionIntroduce: "",
        functionOrderNum: "",
        menuFlag: "2", //固定参数
        nodeType: "2", //固定参数
        title: "",
        nodeKey: ""
      },
      rules: {
        functionUrl: [
          { required: true, message: "功能名称不能为空！", trigger: "blur" }
        ],
        functionName: [
          { required: true, message: "功能路径不能为空！", trigger: "blur" }
        ]
      },
      data: [],
      props: {
        label: "functionName",
        children: "children"
      },
      chackedNode: {}
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      getMenuList().then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.data = res.retBody;
        }
      });
      this.chackedNode = {};
    },
    handleNodeClick(v) {
      console.log(v);
      this.chackedNode =  JSON.parse(JSON.stringify(v));
      // 如果只用树  下边这一句删除掉
      this.dialogShow = true;
    },
    ok() {
      this.$refs.gn.validate(valid => {
        if (valid) {
          if (this.isAdd) {
            this.handleAdd();
          } else {
            this.handleEdit();
          }
        } else {
          this.$message.error("请完善表单！")
          return false;
        }
      });
    },
    handleAdd() {
      this.form.parentId = this.chackedNode.id;
      this.form.menuFlag = "2"; //固定参数
      this.form.nodeType = "2"; //固定参数
      addItem(this.form).then(res => {
       
        this.dialogShow = false;
        if (res.retHead.code == "0000000") {
           this.dialogFormVisible = false;
          this.$message.success("操作成功！");
          this.init();
        } else {
          this.$message.error(res.retHead.message);
        }
      });
    },
    handleEdit() {
      this.form.menuFlag = "2"; //固定参数
      this.form.nodeType = "2"; //固定参数
      editItem(this.form).then(res => {
        this.dialogFormVisible = false;
        this.dialogShow = false;
        if (res.retHead.code == "0000000") {
          this.$message.success("操作成功！");
        } else {
          this.$message.error("操作失败！");
        }
      });
    },
    deleteItem(v) {
      let params = {
        id: v.id
      };
      deleteItem(params).then(res => {
        this.dialogShow = false;
        if (res.retHead.code == "0000000") {
          this.$message.success("操作成功！");
          this.init();
        } else {
          this.$message.error("操作失败！");
        }
      });
    },
    addItem() {
      this.isAdd = true;
      this.dialogFormVisible = true;
      this.form = {};
    },
    editItem(v) {
      console.log(v);
      this.isAdd = false;
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(v));
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  .right {
    text-align: right;
    * {
      margin: 0 10px;
    }
  }
}
</style>